<div id="database-challenge-container" style="border: 1px solid #ccc; border-radius: 8px; padding: 20px; margin: 20px; background-color: #f9f9f9;">
    <h4>🗄️ Database Connection Error Demo</h4>
    <p>This challenge demonstrates how database connection failures can expose sensitive credentials through error messages.</p>

    <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 15px; margin: 15px 0;">
        <p><strong>Try the vulnerable endpoint:</strong></p>
        <p>Click the button below to trigger a database connection error that exposes the connection string with embedded credentials.</p>
        <a href="/error-demo/database-connection" class="btn btn-warning" style="background-color: #ffc107; border-color: #ffc107; color: #212529; text-decoration: none; display: inline-block; padding: 8px 16px; border-radius: 4px; border: 1px solid transparent; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; font-size: 1rem; line-height: 1.5; margin-top: 10px;">
            🚨 Trigger Database Connection Error
        </a>
        <p style="margin-top: 10px;"><small style="color: #666;">This endpoint simulates a database connection failure that exposes the connection string with embedded credentials.</small></p>
    </div>

    <div style="margin-top: 15px; font-size: 12px; color: #666;">
        💡 Tip: Look for the database password in the error message or application logs.
    </div>
</div>
